<template>
  <el-dialog :visible.sync="dialogVisible" width="28%" append-to-body>
    <span slot="title" class="custom-dialog-title">
      <span class="title-line"></span>
      <span class="title-text">巡检详情</span>
    </span>
    <div v-if="selectedResource">
      <p style=" margin-bottom: 0;">
        <strong>打卡人员：</strong>
        {{ selectedResource.realName }}
        <span class="status-tag">
          <span
            :class="['status-text', selectedResource.executionStatus === '已完成' ? 'completed' : 'pending']">
            状态：{{ selectedResource.executionStatus }}
          </span>
        </span>
      </p>
      <p style="margin-top: 20px;"><strong>打卡时间：</strong>
        {{formatTimestamp(selectedResource.executionTime)}}</p>
      <p style="margin-top: 20px;"><strong>打卡点：</strong> {{selectedResource.locationDesc}}</p>
      <p style="margin-top: 20px;"><strong>备注：</strong> {{selectedResource.remark}}</p>
      <div class="image-list">
        <p style="margin-top: 20px;margin-bottom: 20px;"><strong>巡检图片：</strong><strong
            v-if="!selectedResource.imageUrls || selectedResource.imageUrls.length === 0">暂无图片</strong>
        </p>
        <el-image v-for="(url, index) in selectedResource.imageUrls" :key="index" :src="url"
          :preview-src-list="selectedResource.imageUrls" fit="cover"
          style="width: 60vw; height: 27vh; border-radius: 6px; cursor: pointer;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <p style="margin-top: 20px;"><strong>巡检反馈内容：</strong>
      </p>
      <div class="feedback-list" style="margin-top: 10px;">
        <div v-for="(item, index) in selectedResource.inspectionFeedback" :key="index"
          class="feedback-item" style="
      display: flex;
      justify-content: space-between;
      padding: 8px 12px;
      margin-bottom: 6px;
      background-color: #F4F8FF;
      border-radius: 6px;
      border: 1px solid #D4E5FF;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    ">
          <span style="font-weight: 600; color: #236CF2; flex: 1;">
            {{ item.key }}
          </span>
          <span style="color: #666; text-align: right; flex: 2; word-break: break-word;">
            {{ item.value || '暂无反馈' }}
          </span>
        </div>

        <!-- 无反馈提示 -->
        <p v-if="!selectedResource.inspectionFeedback || selectedResource.inspectionFeedback.length === 0"
          style="color: #999; font-style: italic; padding: 10px; text-align: center;">
          暂无巡检反馈内容
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" type="primary">关 闭</el-button>
      </div>

    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      selectedResource: {}
    };
  },
  methods: {
    openDialog(resource) {
      this.selectedResource = resource;
      var imgs = this.selectedResource.imageUrls ? JSON.parse(this.selectedResource.imageUrls) : "";
      this.selectedResource.imageUrls = imgs ? imgs.map(url => { return this.define.comUrl + url.url }) : [];
      this.selectedResource.inspectionFeedback = this.selectedResource.jobinfo ? JSON.parse(this.selectedResource.jobinfo.option1.inspectionFeedback) : [];
      this.dialogVisible = true;
      console.log("🚀 ~ :42 ~ openDialog ~ resource:", this.selectedResource)
    },
    handleClose() {
      this.dialogVisible = false;
    },
    formatTimestamp(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
      if (!timestamp) return '暂无';
      const date = new Date(Number(timestamp)); // 确保是数字类型
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(date.getDate()).padStart(2, '0');

      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    }
  }
};
</script>
<style scoped lang="scss">
.image-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* margin-top: 10px; */
  .el-image {
    width: 100px !important;
    height: 100px !important;
  }
}
.dialog-footer {
  text-align: right;
  padding-top: 30px;
}
.el-dialog__wrapper {
  display: flex;
  padding: 24px;
  .el-dialog {
    margin: auto !important;
  }
}
.feedback-list {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 5px;
}

/* 可选滚动条美化 */
.feedback-list::-webkit-scrollbar {
  width: 6px;
}
.feedback-list::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}
.feedback-list::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::v-deep .el-dialog__header {
  background-color: #f8f8f8;
}

.custom-dialog-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
  padding: 0;
}

.title-line {
  width: 4px;
  height: 16px;
  background: linear-gradient(to bottom, #3f72e7, #84b0fc);
  margin-right: 10px;
  border-radius: 2px;
}

.title-text {
  font-weight: 900;
  margin: 0;
  padding: 0;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.status-tag {
  display: inline-block;
  margin: 8px;
}

.status-text {
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #e4e7ed;
  color: #909399;
  display: inline-block;
  line-height: 1.4;
}

/* 已完成状态 */
.status-text.completed {
  color: #5bbc9c;
  border-color: #b3d8ff;
}

/* 未完成状态 */
.status-text.pending {
  color: #f56c6c;
  border-color: #fbc4c4;
}

::v-deep .el-dialog {
  margin: auto;
}

::v-deep .el-textarea__inner {
  background-color: #f4f8ff;
  font-weight: 900;
}
</style>